const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
// ProgessPlugin是webpack内置的插件
const { ProgressPlugin, ProvidePlugin } = require("webpack")
module.exports = {
    entry: {
        // app: path.resolve(__dirname, "../src/main.js")
        // app: path.resolve(__dirname, "../", "src/main.js")
        // 把第三方包从业务代码中抽离出来，方便后面对第三方包做CDN优化
        chunk: ["react", "react-dom/client"],
        app: {
            // import是用来指定我们业务代码（项目源码）的入口
            import: path.resolve(__dirname, "../", "src/main.js"),
            // 我们的业务代码是依赖第三方包的
            dependOn: "chunk"
        }
    },
    output: {
        path: path.resolve(__dirname, "../", "dist"),
        filename: 'js/[name].[chunkhash:8].js',
        clean: true, // 每次build打包时，自动删除之前打包的文件
    },
    plugins: [
        new HtmlWebpackPlugin({
            // template: './public/index.html'
            template: path.resolve(__dirname, "../", "public/index.html"),
            inject: "body", // 把js脚本注入到body结束标签之前
            filename: "index.html", // 指定打包成功后的页面的名字
            title: "vue-element-admin", // 用来指定页面中title标题的
            favicon: path.resolve(__dirname, "../", "public/favicon.png")
        }),
        new ProgressPlugin({
            // handler(percentage, message, ...args) {
            //     // console.log(percentage);
            //     if (percentage === 1) {
            //         console.log("100% 打包/启动成功~");
            //     } else {
            //         console.log(`${Math.floor(percentage * 100)}%正在打包(编译)...`);
            //     }
            // }
        }),
        new ProvidePlugin({
            React: path.resolve(__dirname, "../", "node_modules/react/index.js")
        })
    ],
    // module是模块的意思，在webpack的眼中一切都是模块
    module: {
        rules: [
            // loader是用来加载的，加载完后，使用@babel/** 进行编译转化，转化成ES5代码 */
            // 当webpack开始工作时，遇到以js或jsx结尾的模块时，使用babel-loader进行加载
            // 加载完后，需要交给@babel/*编译器进行编译，编译后得到ES5代码
            // exclude 用来排队第3方包的编译
            { test: /\.(js|jsx|ts|tsx)$/, use: "babel-loader", exclude: /node_modules/ },
            // 当webpack开始工作时，遇到以css结尾的模块时，加载并解析返回css代码，由style-loader接收，并把css代码以
            // js的方式，插入到head标签中，是以内部样式的形式
            // loader的使用顺序是从后向前的，如果样式是scss写的，先使用sass-loader翻译成css，再使用css-loader加载处理
            { test: /\.(css|scss)$/, use: ["style-loader", "css-loader", "sass-loader"] },
            // { test: /\.(png|jpg|svg|gif|jpeg|webp)$/, use: "file-loader" },
            // { test: /\.(png|jpg|svg|gif|jpeg|webp)$/, use: "url-loader" },

            // type: 'asset/resource' 相当于使用了file-loader
            {
                test: /\.(png|jpg|svg|gif|jpeg|webp)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'img/[name].[contenthash:8][ext]'
                }
            },

        ]
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "../", "src")
        },
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    }
}